<template>
    <div style="height: 100%;display: flex;justify-content: center; background-color: #f5f5f5;">
        <el-card style="width: 30%;height: 60%;background-color: #fff;margin-top: 8%;">

            <h2 style="text-align: center;font: 700 32px 微软雅黑;margin: 5% 0 15% 0;line-height: 0.75em;">
                OSIX
                <br />
                <span style="font:400 18px 微软雅黑;">教务管理系统</span>
            </h2>

            <el-form ref="formRef" :model="formState" style="margin: 0 auto;width: 300px;" :rules="fromRules">

                <el-form-item label="账号" prop="username">
                    <el-input v-model="formState.username" placeholder="请输入账号" />
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="formState.password" placeholder="请输入密码" show-password />
                </el-form-item>

                <el-form-item>
                    <!-- <el-checkbox v-model="formState.remember" label="自动登录" size="large" /> -->

                    <el-button type="primary" link @click="reset" style="margin-left: 80%;">重置输入</el-button>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="login" style="width: 100%;">登录</el-button>
                </el-form-item>


            </el-form>






        </el-card>

    </div>


</template>


<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage, ElForm } from 'element-plus'
import useBaseStore from '@/stores/baseStore.js'
import { MD5 } from 'crypto-js'
import axios, { HttpStatusCode } from 'axios';

const baseStore = useBaseStore()

console.log(baseStore);

const formRef = ref<typeof ElForm | null>(null);
const formState = ref({
    username: '',
    password: '',
    remember: false,
})

const fromRules = {
    username: [
        { required: true, message: '必填项不应该为空', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '必填项不应该为空', trigger: 'blur' },
        { min: 6, message: '密码长度至少为6位', trigger: 'blur' },
    ],
}

const reset = () => {
    formState.value = {
        username: '',
        password: '',
        remember: false,
    }
}

const login = async () => {
    try {
        // 验证表单
        const validate = await formRef.value?.validate((e: Boolean) => e)
        if (!validate) {
            ElMessage({ message: '请检查表单', type: 'warning' })
            return
        }

        const data = {
            username: formState.value.username,
            password: MD5(formState.value.password).toString()
        }

        const result = await axios.post('/api/login', data);
        if (result.data.code === HttpStatusCode.Ok) {
            baseStore.setAdmin(result.data.data)
            ElMessage.success('登录成功');
        } else if (result.data.code === HttpStatusCode.Unauthorized) {
            ElMessage.info('用户名或密码错误');
        }

    } catch (error) {
        console.log(error);
        ElMessage.error('无法连接服务器');
    }

}

</script>

<style scoped></style>